<template>
  <el-dialog
    customClass="customWidth"
    :visible.sync="visible"
    @close="$emit('update:show', false)"
    :show="show"
    :show-close="false"
  >
    <el-col :span="24" :offset="12"><span>成熟度统计分析</span></el-col>
    <el-row>
      <el-col :span="16"
        ><div id="m1">
          <maturityStatistics
            :ydata1="csdtsydata1"
            :ydata2="csdtsydata2"
            :ydata3="csdtsydata3"
            :xdata1="csdtsxdata1"
          /></div
      ></el-col>
      <el-col :span="8"
        ><div id="m3"><shan :xdata="shandata" /></div>
        <div id="m2">
          <yuanzhu
            :width="width"
            :height="height"
            :color="color1"
            :data1="xdata1"
            :data2="ydata1"
          /></div
      ></el-col>
    </el-row>
    <el-col :span="24" :offset="12">
      <div id="end"><el-button size="mini" @click="close">返回</el-button></div>
    </el-col>
  </el-dialog>
</template>
 
<script>
import maturityStatistics from "components/ComprehensiveInformation/com/maturityStatistics.vue";
import shan from "components/ComprehensiveInformation/com/shan.vue";
import yuanzhu from "components/ComprehensiveInformation/com/yuanzhu.vue";
import { csdts, djfb, zqcsdpj } from "api/echar";

export default {
  components: {
    maturityStatistics,
    shan,
    yuanzhu,
  },
  data() {
    return {
      color1: ["#3068C3"],
      xdata1: ["成熟度提升", "成熟度提升1级", "成熟度提升2级"],
      ydata1: [],
      multipleSelection: [],
      visible: this.show,
      width: "390px",
      height: "270px",
      csdtsydata1: [],
      csdtsydata2: [],
      csdtsydata3: [],
      csdtsxdata1: [],
      shandata: [],
    };
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: '',
    },
  },
  methods: {
    close() {
      this.$emit("close");
    },
    ok() {
      this.$emit("ok", this.multipleSelection);
      this.getgjjsglb();
    },
    init() {
      let ids = this.id
      console.log(ids);
      csdts(ids).then((res) => {
        console.log(res);
        this.ydata1 = res.data;
      });
      djfb(ids).then((res) => {
        console.log(res.data);
        this.shandata = res.data;
      });
      zqcsdpj(ids).then((res) => {
        //  console.log(res);
        this.csdtsydata1 = res.cstrl;
        this.csdtsydata2 = res.zqtrl;
        this.csdtsydata3 = res.mbtrl;
        this.csdtsxdata1 = res.jsmc;
      });
    },
  },
  watch:{
     show() {
      this.visible = this.show;
    },
    id(){
      this.init()
    }
  },
  mounted() {
  },
};
</script>
 <style scoped>
#m1 {
  margin-top: 3rem;
}
#m2 {
  margin-top: -5.5rem;
}
#m3 {
  margin-top: -2rem;
}
#end {
  margin-top: 0rem;
}
</style>
